<template>
    <div v-loading="loading" loading-tip="请耐心等待，请勿刷新页面">
        <h-section title="同步需求信息到指定多维表格" collapse>
            <flexbox justify="flex-end">
                <a-button type="primary" @click="handleCreate">新增</a-button>
            </flexbox>
            <a-table rowKey="id" size="small" :columns="tableColumns" :data-source="list" :pagination="false">
                <template #type="{ record }">
                    {{ record.type === '1' ? '双周迭代' : '其他' }}
                </template>
                <template #action="{ record }">
                    <a @click="handleEdit(record.id)">修改模板</a>
                    <a-divider type="vertical" />
                    <a @click="handleDelete(record)">删除模板</a>
                    <a-divider type="vertical" />
                    <a @click="handleOpenSyncModal(record)">同步数据</a>
                </template>
            </a-table>
        </h-section>
        <CreateModal ref="createModalRef" @success="handleSuccess" />
        <SyncDataModal ref="syncDataModalRef" />
    </div>
</template>

<script lang="ts">
import api from '@/api';
import { message } from 'ant-design-vue/es';
import { useMessage } from '@/hooks/common/useMessage';
import CreateModal from './components/createModal.vue';
import SyncDataModal from './components/syncDataModal.vue';
import { defineComponent, ref, unref, reactive, toRefs, onBeforeUnmount } from 'vue';
export default defineComponent({
    components: {
        CreateModal,
        SyncDataModal
    },
    props: {
        list: {
            type: Array,
            default: []
        },
        info: {
            type: Object,
            default: () => ({})
        }
    },
    emits: ['success'],
    setup(props, { emit }) {
        const createModalRef = ref<any>();
        const syncDataModalRef = ref<any>();
        const state = reactive<any>({
            loading: false,
            detailData: {}
        });
        const tableColumns = [
            {
                title: '数据源系统',
                dataIndex: 'systemName',
                width: 100
            },
            {
                title: '目标多维表格',
                dataIndex: 'fsFileName',
                width: 200,
                ellipsis: true
            },
            {
                title: '目标多维表格数据表',
                dataIndex: 'fsTableName',
                width: 250
            },
            {
                title: '模板类型',
                dataIndex: 'type',
                slots: { customRender: 'type' },
                width: 100
            },
            {
                title: '创建人',
                dataIndex: 'createByName',
                width: 100
            },
            {
                title: '同步时间',
                dataIndex: 'syncTime',
                width: 160
            },
            {
                title: '操作',
                dataIndex: '',
                key: 'action',
                slots: { customRender: 'action' },
                align: 'center',
                width: 300
            }
        ];
        const handleCreate = () => {
            if (props.info.accountStatus === '未登录') {
                message.error('请先登录飞书');
                return;
            }
            state.detailData = {};
            unref(createModalRef).open(state.detailData, state.info);
        };
        const handleEdit = async (id) => {
            const query = {
                id
            };
            const { success, moule } = await api.fsFileSyncTmplModel.findById(query);
            if (success) {
                state.detailData = {
                    ...moule
                };
                unref(createModalRef).open(state.detailData, state.info);
            }
        };
        // 打开同步数据弹窗
        const handleOpenSyncModal = (record) => {
            unref(syncDataModalRef).open(record);
        };

        const handleDelete = ({ id, name, fsToken }) => {
            if (fsToken) {
                if (props.info.accountStatus === '已失效') {
                    message.error('用户访问凭证失效，请重新获取');
                    return;
                }
            }
            const { createConfirm } = useMessage();
            createConfirm({
                title: `确认删除【${name}】?`,
                iconType: 'danger',
                onOk: async () => {
                    const query = {
                        id
                    };
                    const { success } = await api.fsFileSyncTmplModel.deleteById(query);
                    if (success) {
                        message.success('删除成功');
                        emit('success');
                    } else {
                        message.error('删除失败');
                    }
                }
            });
        };
        const handleSuccess = () => {
            emit('success');
        };
        return {
            createModalRef,
            syncDataModalRef,
            tableColumns,
            ...toRefs(state),
            handleCreate,
            handleEdit,
            handleDelete,
            handleSuccess,
            handleOpenSyncModal
        };
    }
});
</script>

<style scoped>
</style>